import { PureComponent } from 'react';
import { isNull, goTo } from '../../../utils/helper';
import MToast from '../../Util/MToast';
interface Props {
  value?: any,
  onChange: Function,
  value_datatype?: string,
  list: any[],
  errorMsg: string
}
interface State {
  value?: any
}
export default class MySelectMoreDisplay extends PureComponent<Props, State> {
  public state: State = {
    value: this.props.value
  }
  componentWillReceiveProps(nextProps: Props) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      let value = nextProps.value;
      this.setState({
        value
      });
    }
  }
  changeValue = (value) => {
    if (!('value' in this.props)) {
      this.setState({
        value: value
      });
    }
    this.triggerChange(value);
  };

  triggerChange = (changedValue) => {
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };

  onChange = (value) => {
    this.changeValue(value);
  };

  selectMoreItemClick = (item) => {
    let {disabled, readonly } = this.props;
    let isDisabled = disabled == 1;
    let isReadonly = readonly == 1;
    if (isDisabled || isReadonly) {
      return;
    }
    let { value } = this.state;
    let { code } = item;
    let newValue = "";
    if (isNull(value)) {
      newValue = code + "";
    }
    else {
      let n = "," + value + ",";
      if (n.indexOf("," + code + ",") != -1) {
        newValue = n.replace("," + code + ",", ",");
      }
      else {
        newValue = n + code + ","
      }
      newValue = newValue.substring(1);
      newValue = newValue.substring(0, newValue.length - 1);
    }
    if (isNull(newValue)) {
      newValue = undefined
    }
    this.onChange(newValue);
  };
  renderItem = (list) => {
    let { value } = this.state;
    let { value_datatype } = this.props;
    let isNumber = value_datatype == "number";
    let el = [];
    list.map((item, key) => {
      let { name, url, desc, code } = item;
      if (isNumber) {
        code = Number(code);
      }
      let img = "./image/check_box_multi_no.png";
      let isYes = false;
      if (!isNull(value)) {
        let newSelectMoreValue = "," + value + ",";
        if (newSelectMoreValue.indexOf("," + code + ",") != -1) {
          isYes = true;
        }
      }
      if (isYes) {
        img = "./image/check_box_multi_yes.png";
      }
      el.push(
        <div style={{ fontSiFze: "16px", padding: "8px", borderBottom: key !== list.length - 1 ? "1px solid #f7f7f7" : 0 }} data-flex="dir:left cross:center main:start" key={key} onClick={() => {
          this.selectMoreItemClick(item)
        }}>
          <img style={{ width: '20px', height: "20px", marginRight: "10px" }} src={img} alt="" />
          <div data-flex="dir:left cross:center">
            {
              !isNull(url) ? <img style={{ width: "50px", height: "50px", marginRight: "10px" }} src={url} alt="" /> : null
            }
            <div>
              <p>{name}</p>
              <p style={{ color: "#999", fontSize: "14px", marginTop: "2px" }}>{desc}</p>
            </div>
          </div>
        </div>
      )
    })
    return el
  }
  render() {
    let { list, errorMsg } = this.props;
    return (
      <div>
        <div style={{ padding: "5px 0" }}>
          {this.renderItem(list)}
        </div>
        <div className="am-input-error-extra mi" onClick={(e) => {
          e.stopPropagation();
          MToast.info(errorMsg, 2, null, false)
        }} style={{ display: "none", left: "10px" }}
        >
          <img style={{ minWidth: "21px", width: "21px" }} src="image/error_extra.svg" alt="" />
        </div>
      </div>
    )
  }
}